<template>
  <div class="AddRoleForm">
    <div class="formTitle clearfix">
      <div class="fl">
        <span>角色名称：{{ choiceData.name }}</span>
      </div>
      <div class="fr">
        <el-button type="primary" @click="saveAll">保存</el-button>
      </div>
    </div>
    <div class="formContent">
      <el-row style="padding:10px; font-size:16px;font-weight:600">
        <el-col :span="4">一级</el-col>
        <el-col :span="20">
          <el-row>
            <el-col :span="6">二级</el-col>
            <el-col :span="18">权限配置细则</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row
        v-for="(itemF, key) in dataList"
        :key="key"
        style="border: 1px solid #ccc; margin-bottom: 5px;padding:10px"
      >
        <el-col :span="4">
          <el-checkbox @change="handleFirst(itemF)" v-model="itemF.key">{{itemF.name}}</el-checkbox>
        </el-col>
        <el-col :span="20">
          <el-row v-for="(itemS, i) in itemF.children" :key="i">
            <el-col :span="6">
              <el-checkbox v-model="itemS.key" @change="handleSecond(itemS)">{{itemS.name}}</el-checkbox>
            </el-col>
            <el-col :span="18">
              <el-checkbox
                v-for="(item, j) in itemS.children"
                v-model="item.key"
                :key="j"
              >{{item.name}}</el-checkbox>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { addpurchase } from "@/http/rootSetApi.js";
export default {
  name: "AddRoleForm",
  props: ["roleForm", "choiceData", "dailogType"],
  data() {
    return {
      dialogFormVisible: true,
      postData: [],
      dataList: [
        {
          id: "1",
          name: "商品基本资料",
          key: "",
          children: [
            {
              id: "2",
              name: "石料基础设置",
              key: "",
              children: [
                {
                  id: "3",
                  key: "",
                  name: "新增"
                },
                {
                  id: "4",
                  key: "",
                  name: "删除"
                }
              ]
            },
            {
              id: "5",
              key: "",
              name: "商品基础设置",
              children: [
                {
                  id: "6",
                  key: "",
                  name: "新增"
                },
                {
                  id: "7",
                  key: "",
                  name: "删除"
                }
              ]
            },
            {
              id: "8",
              key: "",
              name: "产品编码表",
              children: [
                {
                  id: "9",
                  key: "",
                  name: "新增"
                },
                {
                  id: "10",
                  key: "",
                  name: "删除"
                },
                {
                  id: "11",
                  key: "",
                  name: "查询"
                }
              ]
            },
            {
              id: "12",
              key: "",
              name: "批发销售工费管理"
            },
            {
              id: "13",
              key: "",
              name: "批发石料价管理"
            }
          ]
        },
        {
          id: "14",
          key: "",
          name: "门店基础设置"
        },
        {
          id: "15",
          key: "",
          name: "员工基础设置"
        },
        {
          id: "16",
          key: "",
          name: "供应商基础设置"
        },
        {
          id: "17",
          key: "",
          name: "门店基础设置",
          children: [
            {
              id: "18",
              key: "",
              name: "角色管理"
            },
            {
              id: "19",
              key: "",
              name: "权限设定"
            }
          ]
        },
        {
          id: "20",
          key: "",
          name: "系统设置",
          children: [
            {
              id: "21",
              key: "",
              name: "编码规则设置",
              children: [
                {
                  id: "22",
                  key: "",
                  name: "新增"
                },
                {
                  id: "23",
                  key: "",
                  name: "删除"
                },
                {
                  id: "24",
                  key: "",
                  name: "查询"
                }
              ]
            }
          ]
        },
        {
          id: "25",
          key: "",
          name: "更改密码"
        },
        {
          id: "26",
          key: "",
          name: "商品管理",
          children: [
            {
              id: "27",
              key: "",
              name: "商品入库",
              children: [
                {
                  id: "28",
                  key: "",
                  name: "查询"
                },
                {
                  id: "29",
                  key: "",
                  name: "新增"
                }
              ]
            },
            {
              id: "30",
              key: "",
              name: "采购退货"
            },
            {
              id: "31",
              key: "",
              name: "商品拆料"
            },
            {
              id: "32",
              key: "",
              name: "配货出库"
            },
            {
              id: "33",
              key: "",
              name: "商品销售"
            },
            {
              id: "34",
              key: "",
              name: "销售退货"
            },
            {
              id: "35",
              key: "",
              name: "商品调价"
            },
            {
              id: "36",
              key: "",
              name: "门店调拨"
            },
            {
              id: "37",
              key: "",
              name: "门店退货"
            },
            {
              id: "38",
              key: "",
              name: "库存盘点"
            },
            {
              id: "39",
              key: "",
              name: "库存统计"
            },
            {
              id: "40",
              key: "",
              name: "库存查询"
            }
          ]
        },
        {
          id: "41",
          key: "",
          name: "库存管理",
          children: [
            {
              id: "42",
              key: "",
              name: "库存统计"
            },
            {
              id: "43",
              key: "",
              name: "历史库存统计"
            },
            {
              id: "93",
              key: "",
              name: "成本变更单"
            },
            {
              id: "44",
              key: "",
              name: "维修货管理"
            },
            {
              id: "45",
              key: "",
              name: "库存盘点"
            }
          ]
        },
        {
          id: "46",
          key: "",
          name: "金料管理"
        },
        {
          id: "47",
          key: "",
          name: "进销存管理"
        },
        {
          id: "48",
          key: "",
          name: "客户管理"
        },
        {
          id: "49",
          key: "",
          name: "利润核算"
        },
        {
          id: "50",
          key: "",
          name: "数据分析"
        }
      ]
    };
  },
  created() {
    this.dialogFormVisible = this.showAddRoleForm;
    this.initCheckbox(this.dataList, this.choiceData.data);
    // console.log(this.choiceData);
  },
  methods: {
    saveAll() {
      this.getSelectId(this.dataList);
      // 发送请求，保存当前角色的权限信息
      addpurchase(this.choiceData.id, this.postData)()
        .then(res => {
          this.$message.success(res.data.msg);
          this.$emit("closeTag");
        })
        .catch(err => {
          console.log(err);
        });
      this.postData = [];
      this.resetAllCheckbox(this.dataList);
    },
    closeAddRoleFome() {
      this.$emit("closeAddRoleFome");
    },
    handleFirst(item) {
      this.editChildStata(item);
    },
    handleSecond(item) {
      this.editChildStata(item);
    },
    // 多级联动
    editChildStata(item) {
      if (item.children) {
        for (let i = 0; i < item.children.length; i++) {
          item.children[i].key = item.key;
          if (item.children[i].children) {
            this.editChildStata(item.children[i]);
          }
        }
      }
    },
    // 获取选中框的id
    getSelectId(data) {
      data.forEach(item => {
        if (item.key) {
          this.postData.push(item.id);
        }
        if (item.children) {
          this.getSelectId(item.children);
        }
      });
    },
    // 重置所有多选框
    resetAllCheckbox(data) {
      data.forEach(item => {
        item.key = "";
        if (item.children) {
          this.resetAllCheckbox(item.children);
        }
      });
    },
    // 初始化表格
    initCheckbox(data, arr) {
      data.forEach(item => {
        if (arr.indexOf(Number(item.id)) != -1) {
          item.key = true;
        }
        if (item.children) {
          this.initCheckbox(item.children, arr);
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.AddRoleForm {
  position: relative;
  padding: 10px;
  height: 630px;
  margin: 10px auto;
  box-shadow: 0 0 2px #ccc;
  .formTitle {
    height: 50px;
    line-height: 50px;
    margin-bottom: 20px;
    font-size: 18px;
  }
  .formContent {
    height: calc(100% - 80px);
    overflow-y: scroll;
  }
  .el-row {
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
  }
  .row-bg {
    padding: 8px 0;
    background-color: #f9fafc;
  }
}
</style>